<template>
  <view class="lt-container">
	  
    
    <view class="bg-layer">
      <view class="bg-grid"></view>
      <text class="bg-watermark">ASSESSMENT</text>
      <view class="orbit-ring"></view>
    </view>

    <view class="header-section">
      <view class="header-deco-bar"></view>
      <view class="score-board">
        <view class="score-circle">
          <view class="score-inner">
            <text class="score-num">{{ reportData.totalScore }}</text>
            <text class="score-label">TOTAL SCORE</text>
          </view>
          <view class="score-ring-active" :style="{ transform: 'rotate(' + (reportData.totalScore * 3.6) + 'deg)' }"></view>
        </view>
        
        <view class="level-box">
          <view class="level-row">
            <text class="label">LEVEL //</text>
            <text class="level-val" :class="levelClass">{{ reportData.level }}</text>
          </view>
          <text class="info-text">ID: {{ shortResumeId }}...</text>
          <text class="info-text">BATCH: {{ reportData.graduationInfo }}</text>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="report-viewport">
      
      <view class="section-card">
        <view class="card-title-bar">
          <text class="title-text">DIMENSIONS // 能力维度</text>
          <view class="title-line"></view>
        </view>
        
        <view class="dimension-list">
          <view class="dim-item" v-for="(dim, index) in reportData.dimensions" :key="index">
            <view class="dim-header">
              <text class="dim-name">{{ dim.dimension }}</text>
              <text class="dim-score">{{ dim.score }} <text class="unit">/100</text></text>
            </view>
            <view class="progress-track">
              <view class="progress-fill" :style="{ width: dim.score + '%' }"></view>
            </view>
            <view class="dim-reason">
              <text class="reason-icon">></text>
              <text>{{ dim.reason }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="section-card">
        <view class="card-title-bar">
          <text class="title-text">SUMMARY // 综合评价</text>
          <view class="title-line"></view>
        </view>
        <view class="summary-box">
          <text>{{ reportData.summary }}</text>
        </view>
      </view>

      <view class="analysis-group">
        <view class="analysis-card green">
          <view class="card-head">
            <text>HIGHLIGHTS</text><text class="icon">+</text>
          </view>
          <view class="card-list">
            <view v-for="(item, index) in reportData.highlights" :key="index" class="list-row">
              <text class="dot"></text><text>{{ item }}</text>
            </view>
          </view>
        </view>

        <view class="analysis-card yellow">
          <view class="card-head">
            <text>MISSING SKILLS</text><text class="icon">!</text>
          </view>
          <view class="card-list">
            <view v-for="(item, index) in reportData.missingSkills" :key="index" class="list-row">
              <text class="dot"></text><text>{{ item }}</text>
            </view>
          </view>
        </view>

        <view class="analysis-card red">
          <view class="card-head">
            <text>RISK WARNINGS</text><text class="icon">x</text>
          </view>
          <view class="card-list">
            <view v-for="(item, index) in reportData.riskWarnings" :key="index" class="list-row">
              <text class="dot"></text><text>{{ item }}</text>
            </view>
          </view>
        </view>
      </view>

      <view style="height: 160rpx;"></view>
    </scroll-view>

    <view class="footer-bar">
      <button class="lt-btn back" @click="goBack">BACK</button>
      <button class="lt-btn confirm" @click="handleConfirm">CONFIRM REPORT</button>
    </view>

  </view>
</template>

<script>
import { selectResumesReportByresumeid } from '../../../api/resume/ResumeReport';
export default {
	
  data() {
    return {
	isLoading: true,
      reportData: {
      //   "scoreId": 1,
      //   "resumeId": "6aed5145-3677-42da-97a4-437529896c93",
      //   "totalScore": 78,
      //   "level": "B",
      //   "graduationInfo": "2026届本科",
      //   "summary": "候选人具备扎实的Java后端开发技术栈和项目实践经验，对SpringBoot、MySQL、Redis等主流技术有实际应用，并展现了系统设计（如DDD、AOP、分布式锁）和复杂业务场景（如拼团、AI Agent）的思考能力。学习意愿和动手能力较强。主要短板在于：1) 求职意向为后端开发，与申请的软件测试岗位不匹配；2) 简历完全侧重开发，未体现任何测试相关的知识、技能或意识；3) 缺乏对计算机基础掌握情况的直接描述。",
      //   "highlights": [
      //     "技术栈掌握全面：熟悉Java后端主流技术栈。",
      //     "项目复杂度较高：涉及分布式、高并发场景。",
      //     "具备一定的系统设计思维：提到了DDD、AOP等理念。"
      //   ],
      //   "missingSkills": [
      //     "软件测试基础：未提及软件测试理论、方法或流程。",
      //     "测试工具与实践：未体现对JUnit, Selenium等的了解。",
      //     "计算机基础明确表述：未清晰说明数据结构、算法等。"
      //   ],
      //   "riskWarnings": [
      //     "岗位意向严重不匹配：求职意向为后端开发。",
      //     "项目真实性需甄别：架构复杂，需深入考察。",
      //     "缺乏证明潜力的硬性证据：无实习、无竞赛、无开源贡献。"
      //   ],
      //   "dimensions": [
      //     { "dimension": "教育背景", "score": 70, "reason": "重庆科技大学本科，符合要求。但非名校，无GPA/排名信息。" },
      //     { "dimension": "CS基础能力", "score": 75, "reason": "具备工程实现能力，但缺乏基础知识直接陈述，测试知识缺失。" },
      //     { "dimension": "实习与实践", "score": 72, "reason": "项目复杂度高但偏开发，无企业实习经历。" },
      //     { "dimension": "学习潜力", "score": 65, "reason": "无竞赛获奖或开源贡献，缺乏客观潜力证明。" }
      //   ]
      },
	  resumeId:''
    }
  },
  computed: {
    // 使用计算属性来处理颜色类名
    levelClass() {
      const level = this.reportData.level;
      if (['S', 'A'].includes(level)) return 'color-green';
      if (['B'].includes(level)) return 'color-yellow';
      return 'color-red';
    },
    // 处理 ID 截取
    shortResumeId() {
      return this.reportData.resumeId ? this.reportData.resumeId.substring(0, 8) : '';
    }
  },
  methods: {
	  
	getResumeReport(){
		selectResumesReportByresumeid(this.resumeId).then(res=>
		{
			
			this.reportData=res.data;
		})
	},
    goBack() {
      uni.navigateBack();
    },
    handleConfirm() {
      uni.showToast({ title: '已确认 / CONFIRMED', icon: 'success' });
    }
  },
 // B页面：接收
 onLoad(options) {
     if(options.resumeId) {
         this.resumeId = options.resumeId;
		 console.log("sssssssssssss"+options.resumeId);
         // 发起请求时，Header里带上 Token，后端双重校验
         
		 this.getResumeReport();
     }
	 
 }
}
</script>

<style lang="scss" scoped>
/* === 孤星风格变量 === */
$lt-bg: #E0E2E5;
$lt-card: rgba(255, 255, 255, 0.9);
$lt-text: #1a1a1a;
$lt-sub: #666;
$c-green: #79BBA9;
$c-yellow: #E6A73C;
$c-red: #9A332D;

.lt-container {
  min-height: 100vh;
  background-color: $lt-bg;
  color: $lt-text;
  font-family: Helvetica, sans-serif;
  position: relative;
}

/* === 背景装饰 === */
.bg-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-grid {
  width: 100%; height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40rpx 40rpx;
}
.bg-watermark {
  position: absolute; top: 80rpx; right: -20rpx;
  font-size: 100rpx; font-weight: 900; color: rgba(0,0,0,0.04);
  transform: rotate(90deg);
}
.orbit-ring {
  position: absolute; bottom: 10%; left: -20%;
  width: 500rpx; height: 500rpx;
  border: 2rpx solid rgba(255,255,255,0.6); border-radius: 50%;
}

/* === 头部评分区 === */
.header-section {
  position: relative; z-index: 10;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(10px);
  padding: 40rpx 30rpx;
  border-bottom: 2rpx solid rgba(0,0,0,0.05);
}
.header-deco-bar {
  height: 6rpx; background: linear-gradient(90deg, $c-green 30%, $c-yellow 30%, $c-yellow 60%, $c-red 60%);
  margin-bottom: 30rpx;
}

.score-board {
  display: flex; align-items: center; justify-content: space-between;
}

.score-circle {
  width: 180rpx; height: 180rpx; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.score-inner {
  width: 150rpx; height: 150rpx; background: #fff; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1); z-index: 2;
}
.score-num { font-size: 60rpx; font-weight: 900; line-height: 1; }
.score-label { font-size: 16rpx; color: $lt-sub; margin-top: 6rpx; }
/* 外部旋转环 */
.score-ring-active {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 4rpx solid transparent; border-top-color: $c-green; border-right-color: $c-green;
  border-radius: 50%; transition: transform 1s ease-out; z-index: 1;
}

.level-box {
  flex: 1; display: flex; flex-direction: column; align-items: flex-end;
}
.level-row { display: flex; align-items: baseline; }
.label { font-size: 24rpx; color: $lt-sub; font-weight: bold; margin-right: 10rpx; }
.level-val { font-size: 80rpx; font-weight: 900; line-height: 1; font-family: Impact, sans-serif; }
/* 动态类名颜色 */
.color-green { color: $c-green; } 
.color-yellow { color: $c-yellow; } 
.color-red { color: $c-red; }

.info-text { font-size: 20rpx; color: $lt-sub; margin-top: 8rpx; font-family: monospace; }

/* === 滚动区域 === */
.report-viewport {
  height: calc(100vh - 350rpx); /* 减去头部和底部 */
}

/* 通用卡片 */
.section-card {
  margin: 30rpx; padding: 30rpx;
  background: $lt-card;
  box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.05);
  /* 切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%);
}
.card-title-bar {
  display: flex; align-items: center; margin-bottom: 24rpx;
}
.title-text { font-size: 24rpx; font-weight: 900; color: $lt-text; letter-spacing: 2rpx; white-space: nowrap; margin-right: 20rpx; }
.title-line { flex: 1; height: 2rpx; background: rgba(0,0,0,0.1); }

/* 维度进度条列表 */
.dimension-list { display: flex; flex-direction: column; gap: 30rpx; }
.dim-item { }
.dim-header { display: flex; justify-content: space-between; font-size: 24rpx; font-weight: bold; margin-bottom: 10rpx; }
.dim-name { color: $lt-text; }
.dim-score { color: $c-green; }
.unit { font-size: 20rpx; color: $lt-sub; font-weight: normal; margin-left: 4rpx; }

.progress-track {
  height: 12rpx; background: rgba(0,0,0,0.06); width: 100%;
  transform: skewX(-20deg); /* 倾斜效果 */
  margin-bottom: 12rpx; overflow: hidden;
}
.progress-fill { height: 100%; background: $c-green; transition: width 1s ease; }

.dim-reason {
  font-size: 22rpx; color: $lt-sub; line-height: 1.5;
  background: rgba(0,0,0,0.02); padding: 10rpx; display: flex;
}
.reason-icon { color: $c-green; margin-right: 10rpx; font-weight: bold; }

/* 综合评价 */
.summary-box {
  font-size: 26rpx; color: $lt-text; line-height: 1.8; text-align: justify;
}

/* 三色分析卡片 */
.analysis-group { margin: 30rpx; display: flex; flex-direction: column; gap: 20rpx; }
.analysis-card {
  background: $lt-card; padding: 24rpx;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15rpx), calc(100% - 15rpx) 100%, 0 100%);
  border-left: 6rpx solid transparent;
}
.analysis-card.green { border-left-color: $c-green; }
.analysis-card.yellow { border-left-color: $c-yellow; }
.analysis-card.red { border-left-color: $c-red; }

.card-head {
  display: flex; justify-content: space-between; font-size: 22rpx; font-weight: 900; margin-bottom: 16rpx; border-bottom: 1px dashed rgba(0,0,0,0.1); padding-bottom: 8rpx;
}
.green .card-head { color: $c-green; }
.yellow .card-head { color: $c-yellow; }
.red .card-head { color: $c-red; }

.list-row { display: flex; align-items: flex-start; margin-bottom: 10rpx; font-size: 24rpx; color: $lt-text; line-height: 1.5; }
.dot {
  width: 8rpx; height: 8rpx; background: #ccc; margin-top: 12rpx; margin-right: 15rpx; flex-shrink: 0;
}
.green .dot { background: $c-green; }
.yellow .dot { background: $c-yellow; }
.red .dot { background: $c-red; }

/* 底部按钮 */
.footer-bar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  padding: 20rpx 30rpx 40rpx;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex; gap: 20rpx; z-index: 99;
}
.lt-btn {
  height: 90rpx; display: flex; align-items: center; justify-content: center;
  font-size: 28rpx; font-weight: bold; border-radius: 0;
  clip-path: polygon(15rpx 0, 100% 0, 100% calc(100% - 15rpx), calc(100% - 15rpx) 100%, 0 100%, 0 15rpx);
}
.lt-btn::after { border: none; }
.back { width: 30%; background: #e0e0e0; color: $lt-sub; }
.confirm { flex: 1; background: $lt-text; color: #fff; }
.lt-btn:active { opacity: 0.9; transform: scale(0.98); }

</style>